import { useState, memo, forwardRef, useRef, useEffect } from 'react'
import * as echarts from "echarts";
import './index.scss'
const TaskChart = forwardRef((props: any, ref: any) => {
    const { data = [] } = props
    const chartRef = useRef<any>(null)
    const myChart = useRef<any>(null)
    const [total, setTotal] = useState<number>(0)
    const getLabel = (val: number) => {
        return val === 0
            ? "公开"
            : val === 1
                ? "内部"
                : val === 2
                    ? "秘密"
                    : val === 3
                        ? "机密"
                        : "绝密";
    }
    const initChart = () => {
        const res = data.map((item: any, index: number) => {
            return {
                name: getLabel(index),
                value: [item],
            };
        });
        const option = {
            tooltip: {
                show: true,
                trigger: "item",
            },
            radar: [
                {
                    indicator: [
                        { name: "公开", max: 1 },
                        { name: "内部", max: 1 },
                        { name: "秘密", max: 1 },
                        { name: "机密", max: 1 },
                        { name: "绝密", max: 1 },
                    ],
                    radius: 75,
                    center: ["50%", "50%"],
                    axisName: {
                        color: "#4C4C4C",
                        borderRadius: 3,
                        padding: [-5, -7],
                        formatter: (a: any, b: any) => {
                            const value = res.find((item: any) => item.name === a)?.value || 0;
                            return `${a}\n${value}`;
                        },
                    },
                },
            ],
            series: [
                {
                    type: "radar",
                    axisLabel:{
                        interval:0
                    },
                    data: [
                        {
                            value: [],
                            itemStyle: {
                                color: "#3E8EFF",
                            },
                            name: "密级分布",
                            areaStyle: {
                                color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                                    {
                                        color: "#3E8EFF",
                                        offset: 0,
                                    },
                                    {
                                        color: "#3E8EFF",
                                        offset: 1,
                                    },
                                ]),
                            },
                        },
                    ],
                },
            ],
        }
        for (let i = 0; i < option.radar[0].indicator.length; i++) {
            option.radar[0].indicator[i].max = Math.max(...data);
        }
        try {
            const total = data.reduce((a: number, b: number) => a + b)
            setTotal(total)
        }catch{

        }
        option.series[0].data[0].value = data;
        myChart.current.setOption(option);
    }
    useEffect(()=>{
        myChart.current = echarts.init(chartRef.current)
    },[])
    useEffect(() => {
        initChart()
    }, [data])
    return (
        <>
            <div className="task-chart">
                <div className="header flex-between">
                    <div className="title">密级分布</div>
                </div>
                <div className="chart" ref={chartRef}></div>
                <div className="task-num">
                    <span className="count">{total}</span>
                    <span style={{ color: '#666', fontSize: '14px', marginTop: '6px' }}>合计任务</span>
                </div>
            </div>
        </>
    )
})
export default memo(TaskChart)